<script setup>
import RoleForm from './Form.vue'
import SettingRoleAPI from "@/api/setting/role.js";
import {arr2Tree} from "@/utils/tools.js";
import {Delete, Edit} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";

defineOptions({
  name: "SettingRole",
  inheritAttrs: false,
})

const formData = reactive({})
const xGridRef = ref()
const xGridOptions = reactive({
  id: 'role_list',
  border: true, //是否带有边框
  stripe: true, //是否带有斑马纹（需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式）
  round: true, //是否为圆角边框
  align: "center",
  height: '100%',
  rowConfig: {
    keyField: 'id',
    isCurrent: true, //当鼠标点击行时，是否要高亮当前行
    isHover: true, //当鼠标移到行时，是否要高亮当前行
  },
  editConfig: {
    trigger: 'click',
    mode: 'cell'
  },
  columnConfig: {
    resizable: true, //每一列是否启用列宽调整
  },
  customConfig: {
    storage: true
  },
  pagerConfig: {
    pageSize: 20,
    pageSizes: [10, 20, 50, 100, 200, 500]
  },
  columns: [
    {field: 'id', title: 'ID', width: 60},
    {title: '角色', field: 'name'},
    {title: "KEY", field: 'key'},
    {title: "菜单权限", field: 'id', slots: {default: 'menu_default'}},
    {title: "备注", field: 'remark',},
    {title: '创建时间', field: 'created_at', width: 180},
    {title: '更新时间', field: 'updated_at', width: 180},
    {title: '操作', width: 130, slots: {default: 'operate_default'}}
  ],
  toolbarConfig: {
    refresh: true, // 显示刷新按钮
    zoom: true, // 显示全屏按钮
    custom: true, // 显示自定义列按钮
    slots: {
      tools: 'toolbar_tools',
      buttons: 'toolbar_buttons',
    },
  },
  proxyConfig: {
    sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
    response: {
      result: 'list', // 配置响应结果列表字段
      total: 'total' // 配置响应结果总页数字段
    },
    // 只接收Promise，具体实现自由发挥
    ajax: {
      // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
      query: async ({page}) => {
        const queryParams = Object.assign({
          page: page.currentPage,
          pageSize: page.pageSize
        }, formData)
        return SettingRoleAPI.getList(queryParams)
      },
    }
  },
})

const queryEvent = () => {
  const $grid = xGridRef.value
  if ($grid) {
    $grid.commitProxy('query')
  }
}

const roleFormRef = ref()

const _del = (item) => {
  ElMessageBox.confirm('是否删除！？', '提示', {type: 'warning',}).then(() => {
    console.log('11111')
  }).catch(() => {
    console.log(22222222)
  })
}
const __RoleFormClose = () => {
  queryEvent()
}
</script>

<template>
  <div style="height: var(--main-body-box-height)">
    <vxe-grid ref="xGridRef" v-bind="xGridOptions">
      <template #toolbar_buttons>
        <el-button type="primary" @click="roleFormRef.open()">新增</el-button>
      </template>
      <template #menu_default="{ row }">
        <el-tree :data="arr2Tree(row.menus)" default-expand-all :props="{ label: 'title' }"/>
      </template>
      <template #operate_default="{ row }">
        <el-button link type="primary" :icon="Edit" @click="roleFormRef.open(row.id)"/>
        <el-button link type="danger" :icon="Delete" @click="_del(row)"/>
      </template>
    </vxe-grid>
  </div>
  <RoleForm ref="roleFormRef" @close="__RoleFormClose"/>
</template>

<style lang="scss" scoped>

</style>